<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蓝鲸众包 - 我的页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
            padding-bottom: 80px;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 顶部用户信息 */
        .user-header {
            background: linear-gradient(135deg, #2196F3, #21CBF3);
            padding: 25px 20px 30px;
            color: white;
            border-radius: 0 0 25px 25px;
            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
            position: relative;
            overflow: hidden;
        }
        
        .user-header::before {
            content: '';
            position: absolute;
            width: 200%;
            height: 200%;
            top: -100%;
            left: -50%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
            z-index: 1;
        }
        
        .user-info {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(45deg, #64B5F6, #1E88E5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin-right: 15px;
            border: 3px solid rgba(255,255,255,0.3);
        }
        
        .user-details {
            flex: 1;
        }
        
        .user-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        
        .user-id {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .user-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .user-tag {
            background: rgba(255,255,255,0.2);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .user-tag.vip {
            background: linear-gradient(90deg, #FFD54F, #FFB300);
            color: #333;
        }
        
        .user-tag.verified {
            background: linear-gradient(90deg, #81C784, #4CAF50);
        }
        
        .user-tag.worker {
            background: linear-gradient(90deg, #4FC3F7, #039BE5);
        }
        
        /* 账户信息卡片 */
        .account-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin: -15px 20px 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            position: relative;
            z-index: 10;
        }
        
        .account-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: 700;
            color: #2196F3;
        }
        
        .account-balance {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .balance-item {
            text-align: center;
        }
        
        .balance-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .balance-value {
            font-size: 20px;
            font-weight: 700;
            color: #2196F3;
        }
        
        .balance-value.freeze {
            color: #FF9800;
        }
        
        .balance-value.promote {
            color: #4CAF50;
        }
        
        .account-actions {
            display: flex;
            gap: 15px;
        }
        
        .action-btn {
            flex: 1;
            height: 45px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .recharge-btn {
            background: linear-gradient(90deg, #2196F3, #21CBF3);
        }
        
        .withdraw-btn {
            background: linear-gradient(90deg, #4CAF50, #81C784);
        }
        
        .records-btn {
            background: linear-gradient(90deg, #FF9800, #FFB74D);
        }
        
        /* 功能区 */
        .section-title {
            padding: 15px 20px 5px;
            font-size: 18px;
            font-weight: 700;
            color: #333;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 8px;
            color: #2196F3;
        }
        
        .grid-section {
            padding: 0 15px;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 10px 5px 20px;
        }
        
        .grid-item {
            background: white;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px 5px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.03);
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .grid-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.15);
        }
        
        .grid-item i {
            font-size: 24px;
            width: 50px;
            height: 50px;
            background: #E3F2FD;
            color: #2196F3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        
        .grid-item .name {
            font-size: 13px;
            font-weight: 500;
            color: #555;
        }
        
        .grid-item .badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #FF5252;
            color: white;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 任务管理 */
        .task-section {
            padding: 0 20px;
        }
        
        .task-tabs {
            display: flex;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .task-tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .task-tab.active {
            background: #2196F3;
            color: white;
        }
        
        .task-tab:not(.active):hover {
            background: #E3F2FD;
        }
        
        .task-tab .count {
            position: absolute;
            top: 5px;
            right: 10px;
            background: #FF9800;
            color: white;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .task-content {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .task-category {
            margin-bottom: 20px;
        }
        
        .task-category:last-child {
            margin-bottom: 0;
        }
        
        .category-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 16px;
            font-weight: 500;
        }
        
        .category-title .view-all {
            color: #2196F3;
            font-size: 13px;
        }
        
        .task-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #f9f9f9;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .task-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: #2196F3;
        }
        
        .task-item.dispute::before {
            background: #FF5252;
        }
        
        .task-item.waiting::before {
            background: #FF9800;
        }
        
        .task-icon {
            width: 40px;
            height: 40px;
            background: #E3F2FD;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #2196F3;
        }
        
        .task-details {
            flex: 1;
        }
        
        .task-name {
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .task-meta {
            display: flex;
            font-size: 12px;
            color: #777;
        }
        
        .task-meta div {
            margin-right: 15px;
        }
        
        .task-status {
            font-weight: 500;
            color: #2196F3;
        }
        
        .task-item.dispute .task-status {
            color: #FF5252;
        }
        
        .task-item.waiting .task-status {
            color: #FF9800;
        }
        
        /* 服务认证 */
        .service-section {
            padding: 0 20px;
            margin-top: 20px;
        }
        
        .service-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .service-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .service-card i {
            font-size: 32px;
            width: 60px;
            height: 60px;
            background: #E3F2FD;
            color: #2196F3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
        
        .service-title {
            font-weight: 700;
            margin-bottom: 8px;
            color: #333;
        }
        
        .service-desc {
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
            min-height: 40px;
        }
        
        .service-btn {
            background: linear-gradient(90deg, #2196F3, #21CBF3);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            width: 100%;
        }
        
        .service-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
        }
        
        .service-card.vip .service-btn {
            background: linear-gradient(90deg, #FFD54F, #FFB300);
            color: #333;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #999;
            cursor: pointer;
            transition: all 0.3s;
            padding: 5px 15px;
            border-radius: 20px;
        }
        
        .nav-item.active {
            color: #2196F3;
            background: #E3F2FD;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
    </style>
</head>
<body>
    <!-- 顶部用户信息 -->
    <div class="user-header">
        <div class="user-info">
            <div class="user-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="user-details">
                <div class="user-name">
                    张蓝鲸
                    <span class="user-tag vip">SVIP会员</span>
                </div>
                <div class="user-id">ID: BLUEWHALE2023</div>
                <div class="user-tags">
                    <span class="user-tag verified">已实名</span>
                    <span class="user-tag worker">平台从业者</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 账户信息卡片 -->
    <div class="account-card">
        <div class="account-title">
            <span>我的账户</span>
            <i class="fas fa-wallet"></i>
        </div>
        
        <div class="account-balance">
            <div class="balance-item">
                <div class="balance-label">可用余额</div>
                <div class="balance-value">¥2,800.00</div>
            </div>
            <div class="balance-item">
                <div class="balance-label">冻结资金</div>
                <div class="balance-value freeze">¥500.00</div>
            </div>
            <div class="balance-item">
                <div class="balance-label">推广收益</div>
                <div class="balance-value promote">¥350.00</div>
            </div>
        </div>
        
        <div class="account-actions">
            <div class="action-btn recharge-btn">
                <i class="fas fa-plus-circle"></i> 充值
            </div>
            <div class="action-btn withdraw-btn">
                <i class="fas fa-wallet"></i> 提现
            </div>
            <div class="action-btn records-btn">
                <i class="fas fa-list"></i> 记录
            </div>
        </div>
    </div>
    
    <!-- 功能区 -->
    <div class="section-title">
        <i class="fas fa-th-large"></i>
        常用功能
    </div>
    <div class="grid-section">
        <div class="grid-container">
            <div class="grid-item">
                <i class="fas fa-tasks"></i>
                <div class="name">我的任务</div>
                <div class="badge">3</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-gift"></i>
                <div class="name">推广中心</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-map-marker-alt"></i>
                <div class="name">签到打卡</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-book"></i>
                <div class="name">我的课程</div>
                <div class="badge">2</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-store"></i>
                <div class="name">商家中心</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-star"></i>
                <div class="name">评价管理</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-shield-alt"></i>
                <div class="name">安全设置</div>
            </div>
            <div class="grid-item">
                <i class="fas fa-headset"></i>
                <div class="name">联系客服</div>
            </div>
        </div>
    </div>
    
    <!-- 任务管理 -->
    <div class="section-title">
        <i class="fas fa-clipboard-list"></i>
        任务管理
    </div>
    <div class="task-section">
        <div class="task-tabs">
            <div class="task-tab active">我发布的</div>
            <div class="task-tab">我接受的 <div class="count">3</div></div>
        </div>
        
        <div class="task-content">
            <div class="task-category">
                <div class="category-title">
                    <span>进行中的任务</span>
                    <span class="view-all">查看全部</span>
                </div>
                <div class="task-list">
                    <div class="task-item">
                        <div class="task-icon">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <div class="task-details">
                            <div class="task-name">网站UI设计</div>
                            <div class="task-meta">
                                <div>悬赏金额: ¥1,200</div>
                                <div>截止: 2023-12-15</div>
                            </div>
                        </div>
                        <div class="task-status">进行中</div>
                    </div>
                    
                    <div class="task-item waiting">
                        <div class="task-icon">
                            <i class="fas fa-file-code"></i>
                        </div>
                        <div class="task-details">
                            <div class="task-name">小程序开发</div>
                            <div class="task-meta">
                                <div>悬赏金额: ¥3,800</div>
                                <div>截止: 2023-12-20</div>
                            </div>
                        </div>
                        <div class="task-status">待验收</div>
                    </div>
                </div>
            </div>
            
            <div class="task-category">
                <div class="category-title">
                    <span>有异议的任务</span>
                </div>
                <div class="task-list">
                    <div class="task-item dispute">
                        <div class="task-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="task-details">
                            <div class="task-name">LOGO设计</div>
                            <div class="task-meta">
                                <div>悬赏金额: ¥800</div>
                                <div>申请仲裁</div>
                            </div>
                        </div>
                        <div class="task-status">处理中</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 服务认证 -->
    <div class="section-title">
        <i class="fas fa-id-card"></i>
        服务认证
    </div>
    <div class="service-section">
        <div class="service-cards">
            <div class="service-card">
                <i class="fas fa-user-tie"></i>
                <div class="service-title">平台从业者</div>
                <div class="service-desc">实名认证后，可接受任务赚取收益</div>
                <button class="service-btn">立即认证</button>
            </div>
            
            <div class="service-card">
                <i class="fas fa-store"></i>
                <div class="service-title">商家入驻</div>
                <div class="service-desc">成为服务商/培训商/传承商</div>
                <button class="service-btn">申请入驻</button>
            </div>
            
            <div class="service-card vip">
                <i class="fas fa-crown"></i>
                <div class="service-title">升级SVIP</div>
                <div class="service-desc">高校生¥40/年 社会人士¥80/年</div>
                <button class="service-btn">立即升级</button>
            </div>
            
            <div class="service-card">
                <i class="fas fa-qrcode"></i>
                <div class="service-title">推广二维码</div>
                <div class="service-desc">邀请好友注册，赚取推广收益</div>
                <button class="service-btn">生成推广码</button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-tasks"></i>
            <span>任务</span>
        </div>
        <div class="nav-item active">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>

    <script>
        // 简单的交互效果
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const type = this.classList.contains('recharge-btn') ? '充值' : 
                            this.classList.contains('withdraw-btn') ? '提现' : '记录';
                alert(`即将跳转到${type}页面`);
            });
        });
        
        document.querySelectorAll('.service-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const card = this.closest('.service-card');
                const title = card.querySelector('.service-title').textContent;
                alert(`即将进入${title}页面`);
            });
        });
        
        // 切换任务标签
        document.querySelectorAll('.task-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.task-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 底部导航切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>